<template>
    <vol-box
        :title="title"
        v-model="dialogVisible"
        :width="800"
        :draggable="true"
        :on-model-close="closeDialog"
    >
        <template #content>
            <div id="employmentInformation" class="print-div font-color">
                <div class="horizontal-vertical-center">
                    <span class="font-weight">员工入职登记表</span>
                </div>
                <table
                    border="1"
                    cellspacing="0"
                    cellpadding="0"
                    style="width: 100%; margin-top: 16px; text-align: center; height: calc(100% - 40px); border-color: gray; border-radius: 5px;"
                >
                    <tr :style="trHeight">
                        <th :style="thWidth">姓名</th>
                        <td :style="tdWidth">
                            <span v-if="tag === 'look'">{{ rowData.name }}</span>
                            <el-input
                                v-else
                                v-model="rowData.name"
                            />
                        </td>
                        <th :style="thWidth">性别</th>
                        <td :style="tdWidth" colspan="2">
                            <span v-if="tag === 'look'">{{ rowData.gender }}</span>
                            <el-select
                                v-else
                                v-model="rowData.gender"
                                placeholder=""
                            >
                                <el-option
                                    v-for="item in genderOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </td>
                        <td :style="tdWidth" rowspan="4">
                            <div v-if="tag === 'look'" class="image-div">
                                <img v-if="imageUrl" :src="imageUrl" style="max-height: 130px;" />
                            </div>
                            <div v-else class="image-div">
                                <Delete
                                    v-if="imageUrl"
                                    class="delete-icon"
                                    @click="deleImg"
                                />
                                <img v-if="imageUrl" :src="imageUrl" style="max-height: 130px;" />
                                <vol-upload
                                    v-if="!imageUrl"
                                    :img="true"
                                    :url="`${VUE_APP_SYSTEM_API}api/EPersonInfo/Upload`"
                                    :uploadAfter="uploadAfter"
                                    style="position: absolute; top: 30%; left: 5%;"
                                />
                            </div>
                        </td>
                    </tr>
                    <tr :style="trHeight">
                        <th :style="thWidth">民族</th>
                        <td :style="tdWidth">
                            <span v-if="tag === 'look'">{{ rowData.nation }}</span>
                            <el-input
                                v-else
                                v-model="rowData.nation"
                            />
                        </td>
                        <th :style="thWidth">籍贯</th>
                        <td :style="tdWidth" colspan="2">
                            <span v-if="tag === 'look'">{{ rowData.nativePlace }}</span>
                            <el-input
                                v-else
                                v-model="rowData.nativePlace"
                            />
                        </td>
                    </tr>
                    <tr :style="trHeight">
                        <th :style="thWidth">身份证号</th>
                        <td :style="tdWidth">
                            <span v-if="tag === 'look'">{{ rowData.idNumber }}</span>
                            <el-input
                                v-else
                                v-model="rowData.idNumber"
                            />
                        </td>
                        <th :style="thWidth">出生日期</th>
                        <td :style="tdWidth" colspan="2">
                            <span v-if="tag === 'look'">{{ formatYearMonthDate(rowData.birthday) }}</span>
                            <el-date-picker
                                v-else
                                v-model="rowData.birthday"
                                type="date"
                                style="width: 100%;"
                            />
                        </td>
                    </tr>
                    <tr :style="trHeight">
                        <th :style="thWidth">学历</th>
                        <td :style="tdWidth">
                            <span v-if="tag === 'look'">{{ rowData.education }}</span>
                            <el-select
                                v-else
                                v-model="rowData.education"
                                placeholder=""
                            >
                                <el-option
                                    v-for="item in educationOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </td>
                        <th :style="thWidth"></th>
                        <td :style="tdWidth" colspan="2">
                            <!-- <el-select
                                v-model="rowData.AuditStatus"
                            >
                                <el-option
                                    v-for="item in auditStatusOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select> -->
                        </td>
                    </tr>
                    <tr :style="trHeight">
                        <th :style="thWidth">政治面貌</th>
                        <td :style="tdWidth" colspan="2"></td>
                        <th :style="thWidth">户口所在地</th>
                        <td :style="tdWidth" colspan="2"></td>
                    </tr>
                    <tr :style="trHeight">
                        <th :style="thWidth">家庭住址</th>
                        <td :style="tdWidth" colspan="2"></td>
                        <th :style="thWidth">家庭电话</th>
                        <td :style="tdWidth" colspan="2"></td>
                    </tr>
                    <tr :style="trHeight">
                        <th :style="thWidth">任职部门</th>
                        <td :style="tdWidth"></td>
                        <th :style="thWidth">职务</th>
                        <td :style="tdWidth"></td>
                        <th :style="thWidth">职称</th>
                        <td :style="tdWidth"></td>
                    </tr>
                    <tr :style="trHeight">
                        <th :style="thWidth">参加工作时间</th>
                        <td :style="tdWidth" colspan="2"></td>
                        <th :style="thWidth">入职时间</th>
                        <td :style="tdWidth" colspan="2"></td>
                    </tr>
                    <tr :style="trHeight">
                        <th :style="thWidth">毕业院校</th>
                        <td :style="tdWidth"></td>
                        <th :style="thWidth">专业</th>
                        <td :style="tdWidth"></td>
                        <th :style="thWidth">学年</th>
                        <td :style="tdWidth"></td>
                    </tr>
                    <tr :style="trHeight">
                        <th :style="thWidth">外语语种</th>
                        <td :style="tdWidth" colspan="2"></td>
                        <th :style="thWidth">计算机等级</th>
                        <td :style="tdWidth" colspan="2"></td>
                    </tr>
                    <tr :style="trHeight">
                        <th :style="thWidth" rowspan="5">教育经历</th>
                        <th :style="thWidth">时间</th>
                        <th :style="thWidth">学校名称</th>
                        <th :style="thWidth">专业</th>
                        <th :style="thWidth" colspan="2">证书情况</th>
                    </tr>
                    <tr :style="trHeight">
                        <td :style="tdWidth"></td>
                        <td :style="tdWidth"></td>
                        <td :style="tdWidth"></td>
                        <td :style="tdWidth" colspan="2"></td>
                    </tr>
                    <tr :style="trHeight">
                        <td :style="tdWidth"></td>
                        <td :style="tdWidth"></td>
                        <td :style="tdWidth"></td>
                        <td :style="tdWidth" colspan="2"></td>
                    </tr>
                    <tr :style="trHeight">
                        <td :style="tdWidth"></td>
                        <td :style="tdWidth"></td>
                        <td :style="tdWidth"></td>
                        <td :style="tdWidth" colspan="2"></td>
                    </tr>
                    <tr :style="trHeight">
                        <td :style="tdWidth"></td>
                        <td :style="tdWidth"></td>
                        <td :style="tdWidth"></td>
                        <td :style="tdWidth" colspan="2"></td>
                    </tr>
                    <tr :style="trHeight">
                        <th :style="thWidth" rowspan="3">工作经历</th>
                        <th :style="thWidth">工作时间</th>
                        <th :style="thWidth">工作单位</th>
                        <th :style="thWidth">职位</th>
                        <th :style="thWidth" colspan="2">离职原因</th>
                    </tr>
                    <tr :style="trHeight">
                        <td :style="tdWidth"></td>
                        <td :style="tdWidth"></td>
                        <td :style="tdWidth"></td>
                        <td :style="tdWidth" colspan="2"></td>
                    </tr>
                    <tr :style="trHeight">
                        <td :style="tdWidth"></td>
                        <td :style="tdWidth"></td>
                        <td :style="tdWidth"></td>
                        <td :style="tdWidth" colspan="2"></td>
                    </tr>
                    <tr :style="trHeight">
                        <th :style="thWidth">人事部意见</th>
                        <td :style="tdWidth" colspan="2"></td>
                        <th :style="thWidth">用人部意见</th>
                        <td :style="tdWidth" colspan="2"></td>
                    </tr>
                    <tr :style="trHeight">
                        <th :style="thWidth">领导签字</th>
                        <td :style="tdWidth" colspan="2"></td>
                        <th :style="thWidth">日期时间</th>
                        <td :style="tdWidth" colspan="2"></td>
                    </tr>
                </table>
            </div>
        </template>
        <template #footer>
            <div>
                <el-button
                    @click="closeDialog"
                >
                    关闭
                </el-button>
                <el-button
                    v-if="tag === 'add'"
                    type="primary"
                    @click="addBtn"
                >
                    添加
                </el-button>
                <el-button
                    v-if="tag === 'edit'"
                    type="primary"
                >
                    编辑
                </el-button>
                <el-button
                    v-if="tag === 'look'"
                    type="primary"
                    v-print="{id:'employmentInformation'}"
                >
                    打印
                </el-button>
            </div>
        </template>
    </vol-box>
</template>
  
<script setup>
import { ref, computed } from 'vue'
import VolBox from '@/components/basic/VolBox.vue'
import { Delete  } from '@element-plus/icons-vue'
import http from '@/api/http'
import { formatYMD, formatYearMonthDate } from '@/uitils/formatTime'
import { ElMessage } from 'element-plus'
import VolUpload from '@/components/basic/VolUpload.vue'

// 变量
const VUE_APP_SYSTEM_API = window.URL_CONFIG.VUE_APP_SYSTEM_API
const tag = ref(null)
const title = ref('')
const dialogVisible = ref(false)
const rowData = ref(
    {
        name: '',
        gender: '',
        nation: '',
        nativePlace: '',
        idNumber: '',
        birthday: '',
        education: '',
        // 0:待审核；1：通过；2：审核中；3：拒绝
        AuditStatus: 0,
        img: ''
    }
)
const trHeight = ref(
    {
        height: '30px'
    }
)
const thWidth = ref(
    {
        width: '100px'
    }
)
const tdWidth = ref(
    {
        width: '100px'
    }
)
const genderOptions = [
    {
        label: '男',
        value: '男'
    },
    {
        label: '女',
        value: '女'
    }
]
const educationOptions = [
    {
        label: '文盲',
        value: '文盲'
    },
    {
        label: '小学',
        value: '小学'
    },
    {
        label: '初中',
        value: '初中'
    },
    {
        label: '高中',
        value: '高中'
    },
    {
        label: '专科',
        value: '专科'
    },
    {
        label: '本科',
        value: '本科'
    },
    {
        label: '研究生',
        value: '研究生'
    }
]
const auditStatusOptions = [
    {
        label: '通过',
        value: '通过'
    },
    {
        label: '拒绝',
        value: '拒绝'
    },
    {
        label: '待审批',
        value: '待审批'
    }
]
const imageUrl = computed(() => {
    return rowData.value.img ? `${VUE_APP_SYSTEM_API}${rowData.value.img}` : ''
})

// 函数
const emits = defineEmits(['success'])
defineExpose(
    {
        open
    }
)

function open(parameter) {
    tag.value = parameter.tag
    title.value = parameter.title
    if (parameter.tag === 'add') {
    }
    if (parameter.tag === 'edit') {
    }
    if (parameter.tag === 'look') {
        rowData.value = parameter.row
    }
    dialogVisible.value = true
}

function closeDialog() {
    // emits('success')
    dialogVisible.value = false
}

function uploadAfter(result, files) {
    rowData.value.img = result.data + files[0].name
}

function deleImg() {
    rowData.value.img = ''
}

function verifyFieldsMessage(verifyField) {
    switch (verifyField) {
        case 'name':
            return '请填写姓名！'
        case 'gender':
            return '请选择性别！'
        case 'nation':
            return '请填写民族！'
        case 'nativePlace':
            return '请填写籍贯！'
        case 'idNumber':
            return '请填写身份证号！'
        case 'birthday':
            return '请选择出生日期！'
        case 'education':
            return '请选择学历！'
    }
}

function addBtn() {
    const verifyFields = ['name', 'gender', 'nation', 'nativePlace', 'idNumber', 'birthday', 'education']
    for (const item of verifyFields) {
        if (!rowData.value[item]) {
            let message = verifyFieldsMessage(item)
            ElMessage({
                message: message,
                type: 'error'
            })
            return
        }
    }
    rowData.value.birthday = formatYMD(rowData.value.birthday)
    const params = {
        delKeys: null,
        detailData: null,
        mainData: rowData.value
    }
    http.post('/api/EPersonInfo/Add', params).then(res => {
        if (res.status) {
            ElMessage({
                message: '添加成功！',
                type: 'success'
            })
            closeDialog()
        }
    }).catch(error => {
        console.log(error)
    })
}
</script>
  
<style lang="less" scoped>
.print-div {
    height: 710px;
    overflow: hidden;
}

.font-color {
    color: black;
}

.horizontal-vertical-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.font-weight {
    font-weight: bold;
}

::v-deep .el-input__wrapper {
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    .el-input__inner {
        text-align: center;
        color: black;
    }
}

::v-deep .el-select__wrapper {
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    text-align: center;
    .el-select__inner {
        text-align: center;
        color: black;
    }
    .el-select__suffix {
        display: none;
    }
    .el-select__placeholder {
        color: black;
    }
}

::v-deep .el-input__prefix {
    display: none;
}

.upload-style {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

::v-deep .el-upload {
    width: 100%;
    height: 100%;
}

.uploader-icon {
    font-size: 28px;
}

.image-div {
    width: 100%;
    height: 100%;
    position: relative;
}

.delete-icon {
    display: none;
}

.image-div:hover .delete-icon {
    width: 1em;
    height: 1em;
    font-size: 25px;
    position: absolute;
    top: 40%;
    left: 40%;
    cursor: pointer;
    display: block;
    color: red;
}
</style>
  